<template>
  <div class="obody">
    <button class="btn" @click="router.back()">🡠</button>
    <div>轻松预订课程</div>
    <div>这里是是标题辅助文字信息展示内容，最多可以显示两行折行显示内容</div>
    <div class="paging">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p>
      <van-button type="primary" size="large" color="#6c5dd3" @click="router.push('/guidepage3')"
        >下一步</van-button
      >
    </p>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>
<style lang="css" scoped>
.obody {
  background-image: url('https://ts3.cn.mm.bing.net/th?id=ODL.ee3a9bdde172dba6c5b7810f3995f18e&w=237&h=300&c=10&rs=1&qlt=99&bgcl=fffffe&r=0&o=6&dpr=1.3&pid=WrapstarImage');
  background-size: cover;
  padding: 420px 30px 0;
  height: 100vh;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}
.btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: transparent;
  border: none;
  cursor: help;
}
.obody > div:nth-of-type(1) {
  font-size: 25px;
  margin-bottom: 20px;
}
.obody > div:nth-of-type(2) {
  font-size: 13px;
  margin-bottom: 20px;
}
.paging {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.paging > div {
  width: 8px;
  height: 8px;
  background-color: #cecece;
  border-radius: 50%;
  margin: 0 2px;
}
.paging > div:nth-of-type(2) {
  background-color: #6c5dd3;
}
.van-button {
  border-radius: 10px;
}
</style>
